<template>
    <el-card>
           <div slot="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{path:'/home'}" >首页</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="f-search"></div>
                <div class="f-btn">
                    <el-button type="primary" size="default">增加</el-button>
                </div>
           </div>
           <el-table
                :data="roleList"
                border
                style="width: 100%">
                <el-table-column type="expand" >
                    <template slot-scope="scope">
                        <el-row :gutter="20" v-for="item in scope.row.children" :key="item.id">
                            <el-col :span="7">
                               <el-tag>
                                    {{item.authName}}
                               </el-tag>
                               
                                </el-col>
                            <el-col :span="17">
                                <el-row v-for="value in item.children" :key="value.id">
                                    <el-col :span="8">
                                        <el-tag type="success">
                                            {{value.authName}}
                                        </el-tag>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-tag v-for="val in value.children" :key="val.id" type="warning" closable @close="delSingle(scope.row,val.id)">
                                            {{val.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                           
                        </el-row>
                    </template>

                </el-table-column>
                <el-table-column type="index" label="序号" width="100px"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-button @click="editUser(scope.row)" type="success" size="small" icon="el-icon-s-tools"></el-button>
                        <el-button type="danger" size="small" @click="delUser(scope.row.id)" icon="el-icon-delete"> </el-button>
                        <el-button type="danger" size="small"  icon="el-icon-setting" @click="setShow(scope.row)"> </el-button>
                    </template>
                </el-table-column>
            </el-table>


              <!-- 弹框 -->
    <el-dialog
    title="修改权限"
    :visible.sync="isshow"
    width="30%"
    >
    <!-- 树状图 -->
        <el-tree
        ref="tree"
        v-if="isshow"
        :data="rightList"
        show-checkbox
         :default-checked-keys="rightLastId"
        node-key="id"
        :props="{label:'authName',children:'children'}">
        </el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="roleSub">确 定</el-button>
  </span>
</el-dialog>
    </el-card>


  

</template>
<script>
export default {
    data(){
        return {
            roleList:[],
            isshow:false,
            rightList:[],
            rightLastId:[],
            roleId:null,


        }
    },
    created(){
        this.getRoleList()
        this.getRightList()
    },
    methods:{
        setShow(row){
            this.rightLastId=[]
            this.isshow=true
            this.getLastId(row,this.rightList)
            this.roleId=row.id
        },
         // 设置回显的递归id
        getLastId(row,rightLastId){
            if(!row.children){
                return this.rightLastId.push(row.id)
            }
            row.children.forEach(item=>this.getLastId(item,rightLastId))
        },
        // 权限的授权提交
       async roleSub(){
            let rids=[
                ...this.$refs.tree.getCheckedKeys(),
                ...this.$refs.tree.getHalfCheckedKeys(),
            ]
            let {data:res} =await this.$axios.post('roles/'+this.roleId+'/rights',{
                rids:rids.join(',')
            })
            if(res.meta.status!==200) return this.$message.error(res.meta.msg)
            this.$message.success('修改角色授权成功')
            this.getRoleList()
            this.isshow=false
        },
        async getRoleList(){
            let {data:res}=await this.$axios.get('roles')
            if(res.meta.status!==200) return this.$message.error(res.meta.msg)
            this.roleList=res.data
            
        },
         async getRightList(){
           let {data:res} =await this.$axios.get('rights/tree')
           if(res.meta.status!==200) return this.$message.error(res.meta.msg)
           console.log(res);
           this.rightList=res.data
           
        },
       async delSingle(scope,rightid){
            try {
                await this.$messagebox.confirm('您确定要删除吗','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                let {data:res}=await this.$axios.delete(`roles/${scope.id}/rights/${rightid}`)
                if(res.meta.status!==200) return this.$message.error(res.meta.msg)
                scope.children=res.data
                
            } catch (error) {
                this.$message.error('取消删除')
            }
        },
       
    }

}
</script>
<style lang="less">
.f-search{
    width: 300px;
    float: left;

    
}
.f-btn {
    float: right;
}
.el-tag{
    margin:10px
}

</style>
